<template>
	<view class="page back">
		<view class="f-st">
			<view class="fys">
				<view class="sf">
					<text v-if="step==1">输入支付密码 验证身份</text>
					<text v-else>输入修改支付密码</text>
				</view>
				<u-code-input v-if="step==1" :focus="true" color="#000000" dot v-model="form.oldpassword"
					:maxlength="6"></u-code-input>
				<u-code-input v-else :focus="true" color="#000000" dot v-model="form.newpassword"
					:maxlength="6"></u-code-input>
			</view>
			<u-button v-if="step==1" color="#ff5a08" @click="()=>{step=2}" style="margin-top: 1rem;"
				text="验证"></u-button>
			<u-button v-else color="#ff5a08" @click="submitForm" style="margin-top: 1rem;" text="确认修改"></u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				captchaSrc: "",
				step: 1,
				form: {

					oldpassword: "",
					newpassword: "",

				},

				rules: {
					
				}
			}
		},
		methods: {

			async submitForm() {
		
					// // 校验通过，执行提交操作
					const {
						uid
					} = uni.getStorageSync('uid')
					const param = {
						oldPassword: this.form.oldpassword,
						newPassword: this.form.newpassword,
						userId: uid
					}
					const res = await this.$request.post('/system/user/updatePaymentPwd', param)
					console.log(res);
					if (res.code == 200) {

						this.$refs.uToast.show({
							type: 'success',
							title: '成功主题(带图标)',
							message: res.message,
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'

						})
					} else {
						this.$refs.uToast.show({
							type: 'error',
							icon: false,
							title: '失败主题',
							message: res.message,
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'

						})
					}
			},
			validateConfirmPassword(rule, value, callback) {
				if (value !== this.form.newpassword) {
					callback(new Error('确认密码与新密码不一致'));
				} else {
					callback();
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.back {
		width: 100%;
		height: 100vh;
		background: #ffffff;
	}

	.f-st {
		width: 90vw;
		height: auto;
		padding: 10rpx;
		// border-radius: 0.3rem;
		position: absolute;
		background-color: #ffffff;
		top: 15%;
		left: 50%;
		transform: translate(-50%, -50%);

		.fys {
			text-align: center;
			margin: 0 auto;
			display: grid;
			place-items: center;

			.sf {
				opacity: 0.8;
				margin-bottom: 1rem;
			}
		}
	}

	// /deep/.u-border-bottom {
	// 	border: 0.5px solid #f3b10a;
	// }

	// .inputmap {
	// 	border: 0.5px solid #f3b10a;
	// }

	.title-pad {
		text-align: center;
		width: 100%;
		padding-top: 1rem;
	}
</style>